<template>
  <div>
    <div class="c-container">
      <div class="title">确认函管理</div>
      <el-input
        class="sc-container"
        placeholder="请输入确认函名称"
        v-model="search"
        @keyup.enter.native="getList"
      >
        <el-button slot="append" @click.native="getList" icon="el-icon-search" />
      </el-input>
      <div class="right-container">
        <el-button @click="handleAdd" type="primary"> 新建确认函 </el-button>
      </div>
    </div>
    <div
      v-empty="!crm.confirmation.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <el-table
        class="n-table--border"
        id="crm-table"
        v-loading="loading"
        :data="list"
        :height="tableHeight"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        :cell-style="cellStyle"
        @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column show-overflow-tooltip prop="title" label="标题" />
        <el-table-column show-overflow-tooltip prop="remark" label="备注" />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          class="p-bar"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <confirmation-detail
      v-if="showDview"
      :id="rowID"
      :crmType="crmType"
      @handle="handleHandle"
      @hide-view="showDview = false"
      class="d-view"
    />
    <fields-set
      :crmType="crmType"
      @set-success="setSave"
      :dialogVisible.sync="showFieldSet"
    />
    <el-dialog
      title="新建确认函"
      :close-on-click-modal="false"
      :visible.sync="confirmShow"
      width="500px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="form.title" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSaveConfirm">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import confirmationDetail from "./confirmationDetail";
import table from "../mixins/table";
import {
  crmConfirmationSave,
  crmConfirmationDel,
} from "@/api/customermanagement/confirmation";

export default {
  /** 客户管理 的 确认函列表 */
  name: "confirmationIndex",
  components: {
    confirmationDetail,
  },
  mixins: [table],
  data() {
    return {
      crmType: "confirmation",
      confirmShow: false, // 新建确认函弹窗
      form: {},
      rules: {
        title: [{ required: true, message: "请输入确认函名称", trigger: "blur" }],
      },
    };
  },
  computed: {},
  watch: {
    // 清除验证
    confirmShow(val) {
      if (!val) this.$refs.form.resetFields();
    },
  },
  methods: {
    // 新建确认函
    handleAdd() {
      this.confirmShow = true;
      this.form = {
        title: null, // 确认函名称
        remark: null, // 备注
      };
    },
    // 编辑确认函
    handleEdit(row) {
      this.rowID = row.confirmation_id;
      this.showDview = true;
    },
    // 删除确认函
    handleDel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          crmConfirmationDel({ confirmation_id: row.confirmation_id }).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 保存确认函
    onSaveConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          crmConfirmationSave(this.form).then((res) => {
            this.$message.success("新建成功");
            this.confirmShow = false;
            this.search = "";
            this.getList();
          });
        }
      });
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        return { color: "#3E84E9", cursor: "pointer" };
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
.c-container {
  height: 60px;
  position: relative;
  z-index: 100;
  .title {
    float: left;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
  }
  .sc-container {
    width: 300px;
    margin: -18px 0 0 -150px;
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .right-container {
    margin-right: -10px;
    float: right;
    margin: 12px 20px 0 0;
    position: relative;
    .right-item {
      float: left;
      margin-right: 10px;
      padding: 8px 10px;
      font-size: 13px;
      border-radius: 2px;
    }

    .right-more-item {
      cursor: pointer;
      border: 1px solid #dcdfe6;
      background-color: white;
      font-size: 13px;
      color: #777;
      padding: 0 12px;
      border-radius: 2px;
      height: 31px;
    }
  }
}
</style>
